<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入关键字" v-model="searchParam.SEARCH_LIKE_rolename" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{
                $t('table.search') }}
            </el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                       @click="handleCreate">{{ $t('table.add') }}
            </el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">

            <el-table-column v-for="column in columns" :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"
                             :width="column.width"
                             :align="column.align?column.align:'center'"
                             :min-width="column.minWidth"
                             :sortable="column.sortable"
                             :fixed="column.fixed"
                             :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                    <img v-if="column.imgFlag==true" :src="scope.row[column.prop]" width="60" height="60" class="img"/>
                    <span v-else-if="column.formatter"> {{column.formatter(scope.row)}}</span>
                    <span v-else>{{scope.row[column.prop]}}</span>
                </template>

            </el-table-column>

            <el-table-column :label="$t('table.actions')" align="center" width="160"
                             class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}
                    </el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                    :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :title="operation?'新增':'编辑'" width="50%" top="5vh" :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false">
            <div style="height:500px;overflow-y: scroll;">
                <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm">
                    <el-form-item label="角色名称" prop="rolename">
                        <el-input size="mini" v-model="dataForm.rolename" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="角色编码" prop="rolecode">
                        <el-input size="mini" v-model="dataForm.rolecode" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述" prop="remark">
                        <el-input size="mini" v-model="dataForm.remark" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="closeDialog()">取消</el-button>
                <el-button size="mini" @click.native="saveFormData()" :loading="editLoading" type="primary">提交
                </el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>

    import waves from '@/directive/waves' // Waves directive
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

    export default {
        name: 'product-brand',
        components: {Pagination},
        directives: {waves},
        filters: {},
        data() {
            return {
                tableKey: 0,
                tableList: [],//表格数据源
                tableTotal: 0,//表格总条数数据
                listLoading: true,
                pageRequest: {pageNum: 1, pageSize: 10,},
                searchParam: {SEARCH_LIKE_rolename: ''},
                dialogFormVisible: false,//默认不显示弹出框
                operation: true, // true:新增, false:编辑
                editLoading: false,//保存表单时loading框
                columns: [
                    <#if vo.columns?exists>
                    <#list vo.columns as item>
                    {prop: '${item.columnName}', label: '${item.columnRemark}', sortable: false},
                    </#list>
                    </#if>
                ],
                formFields: [
                    <#if vo.columns?exists>
                    <#list vo.columns as item>
                    {prop: '${item.columnName}', label: '${item.columnRemark}', sortable: false},
                    </#list>
                    </#if>
                ],
                // 新增编辑界面数据
                dataForm: {},
                //表单检验规则
                dataFormRules: {
                    rolename: [{required: true, message: '请输入角色名', trigger: 'blur'}],
                    rolecode: [{required: true, message: '请输入角色编码', trigger: 'blur'}]
                },
            }
        },
        created() {
            this.getList();
        },
        methods: {
            //获取表格数据
            getList() {
                this.listLoading = true
                //【API请求】----获取用户列表数据
                this.$api.getUserList(this.pageRequest).then(response => {
                    this.tableList = response.data.content
                    this.tableTotal = response.data.totalSize
                    this.listLoading = false;
                }).catch((res) => {
                    this.$message({message: '用户列表获取失败', type: 'error'})
                })
            },
            //表格数据筛选
            handleFilter() {
                this.pageRequest.searchParam = this.searchParam
                this.getList()
            },
            //【按钮点击】--- 弹出新增表单
            handleCreate() {
                this.operation = true;
                this.initDataForm();
                ;
                this.dialogFormVisible = true
                this.checkedIds = [];
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false;
                })
            },
            //【按钮点击】--- 弹出编辑表单
            handleUpdate(row) {
                this.operation = false;
                this.dataForm = Object.assign({}, row)
                //显示编辑菜单
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false;
                })

            },
            //保存表单数据
            saveFormData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.editLoading = true;
                    //【API请求】----保存数据
                    this.$api.saveUserInfo("", this.dataForm).then(() => {
                        this.editLoading = false;//关闭loading框
                        this.dialogFormVisible = false;//关闭表单页面
                        this.initDataForm();//重置表单数据
                        this.getList();//重新获取表格数据
                        this.$notify({title: '成功', message: '保存成功', type: 'success', duration: 2000})
                    })
                })
            },
            //【按钮点击】---删除行
            handleDelete(row) {
                this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
                    //【API请求】---- 删除数据
                    this.$api.deleteUser({ids: row.id}).then(() => {
                        this.$message({message: '操作成功', type: 'success'})
                        this.getList();
                    })
                }).catch(() => {
                });
            },
            //初始化表单数据，重新渲染
            initDataForm() {
                this.dataForm = {
                    <#if vo.columns?exists>
                    <#list vo.columns as item>
                    ${item.columnName}: '',
                    </#list>
                    </#if>
                }
            },
            //关闭表单弹出框
            closeDialog() {
                this.$refs['dataForm'].resetFields();
                this.dialogFormVisible = false
            }

        }


    }
</script>
